<template>
  <div class="home-main">
    <Row>
      <Col span="8">
        <Row>
          <Card>
            <Row type="flex" class="user-infor">
                <Col span="8">
                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                        <img class="avator-img" :src="avatorPath" />
                    </Row>
                </Col>
                <Col span="16" style="padding-left:6px;">
                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                        <div>
                            <b class="card-user-infor-name">Admin</b>
                            <p>super admin</p>
                        </div>
                    </Row>
                </Col>
            </Row>
            <div class="line-gray"></div>
            <Row class="margin-top-8">
                <Col span="8"><p class="notwrap">上次登录时间:</p></Col>
                <Col span="16" class="padding-left-8">2017.09.12-13:32:20</Col>
            </Row>
            <Row class="margin-top-8">
                <Col span="8"><p class="notwrap">上次登录地点:</p></Col>
                <Col span="16" class="padding-left-8">北京</Col>
            </Row>
        </Card>
        </Row>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-checkbox-outline"></Icon>
                    待办事项
                </p>
                <a type="text" slot="extra" @click.prevent="addNewToDoItem">
                    <Icon type="plus-round"></Icon>
                </a>
                <Modal
                    v-model="showAddNewTodo"
                    title="添加新的待办事项"
                    @on-ok="addNew"
                    @on-cancel="cancelAdd">
                    <Row type="flex" justify="center">
                        <Input v-model="newToDoItemValue" icon="compose" placeholder="请输入..." style="width: 300px" />
                    </Row>
                    <Row slot="footer">
                        <Button type="text" @click="cancelAdd">取消</Button>
                        <Button type="primary" @click="addNew">确定</Button>
                    </Row>
                </Modal>
                <div class="to-do-list-con">
                    <div v-for="(item, index) in toDoList" :key="index" class="to-do-item">
                        <TodoListItem :content="item.title"></TodoListItem>
                    </div>
                </div>
            </Card>
        </Row>
      </Col>
      <Col span="16" class-name="padding-left-5">
            <Row>
                <Col span="6">
                    <infor-card
                        id-name="user_created_count"
                        :end-val="count.createUser"
                        iconType="android-person-add"
                        color="#2d8cf0"
                        intro-text="今日新增用户"
                    ></infor-card>
                </Col>
                <Col span="6" class-name="padding-left-5">
                    <infor-card
                        id-name="visit_count"
                        :end-val="count.visit"
                        iconType="ios-eye"
                        color="#64d572"
                        :iconSize="50"
                        intro-text="今日浏览量"
                    ></infor-card>
                </Col>
                <Col span="6" class-name="padding-left-5">
                    <infor-card
                        id-name="collection_count"
                        :end-val="count.collection"
                        iconType="upload"
                        color="#ffd572"
                        intro-text="今日数据采集量"
                    ></infor-card>
                </Col>
                <Col span="6" class-name="padding-left-5">
                    <infor-card
                        id-name="transfer_count"
                        :end-val="count.transfer"
                        iconType="shuffle"
                        color="#f25e43"
                        intro-text="今日服务调用量"
                    ></infor-card>
                </Col>
            </Row>
            <Row class="margin-top-10">
                <Card :padding="0">
                    <p slot="title" class="card-title">
                        <Icon type="map"></Icon>
                        今日服务调用地理分布
                    </p>
                    <div class="map-con">
                        <Col span="10">
                            <MapDataTable :cityData="cityData" height="281" :style-obj="{margin: '12px 0 0 11px'}"></MapDataTable>
                        </Col>
                        <Col span="14" class="map-incon">
                            <Row type="flex" justify="center" align="middle">
                                <HomeMap :city-data="cityData"></HomeMap>
                            </Row>
                        </Col>
                    </div>
                </Card>
            </Row>
        </Col>
    </Row>
    <Row class="margin-top-10">
        <Card>
            <p slot="title" class="card-title">
                <Icon type="ios-shuffle-strong"></Icon>
                上周每日服务调用量(万)
            </p>
            <div class="line-chart-con">
                <ServiceRequests></ServiceRequests>
            </div>
        </Card>
    </Row>
  </div>
</template>

<script>
import TodoListItem from '@/components/home/ToDoListItem'
import InforCard from '@/components/home/InforCard'
import HomeMap from '@/components/home/Map.vue';
import MapDataTable from '@/components/home/MapDataTable.vue';
import ServiceRequests from '@/components/home/ServiceRequests.vue';
import cityData from '@/components/home/map-data/get-city-value.js';
export default {
  data() {
    return {
      toDoList: [
          {
              title: '去iView官网学习完整的iView组件'
          },
          {
              title: '去iView官网学习完整的iView组件'
          },
          {
              title: '去iView官网学习完整的iView组件'
          },
          {
              title: '去iView官网学习完整的iView组件'
          },
          {
              title: '去iView官网学习完整的iView组件'
          }
      ],
      count: {
          createUser: 496,
          visit: 3264,
          collection: 24389305,
          transfer: 39503498
      },
      cityData: cityData,
      showAddNewTodo: false,
      newToDoItemValue: ''
    }
  },
  components: {
    TodoListItem,
    InforCard,
    HomeMap,
    MapDataTable,
    ServiceRequests
  },
  computed: {
    avatorPath() {
      return localStorage.avatorPath;
    },
    username() {
      return localStorage.username;
    }
  },
  methods: {
      addNewToDoItem () {
          this.showAddNewTodo = true;
      },
      addNew () {
          if (this.newToDoItemValue.length !== 0) {
              this.toDoList.unshift({
                  title: this.newToDoItemValue
              });
              setTimeout(() => {
                  this.newToDoItemValue = '';
              }, 200);
              this.showAddNewTodo = false;
          } else {
              this.$Message.error('请输入待办事项内容');
          }
      },
      cancelAdd () {
          this.showAddNewTodo = false;
          this.newToDoItemValue = '';
      }
  }

}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>


